<template>
  <div>
    <table cellpadding="0" cellspacing="0" v-if="data && data.length > 0" width="100%">
      <tr>
        <th width="100px">&nbsp;</th>
        <th width="30%">音乐标题</th>
        <th width="15%">歌手</th>
        <th width="25%">专辑</th>
        <th width="50px">时长</th>
        <th width="100px">热度</th>
      </tr>
      <tr @dblclick="playMusic(item)" class="cell-row" v-for="(item, index) in data">
        <td style="display: flex; align-items: center; line-height: 35px">
          <span
            style="min-width: 2em; max-width: 2em; padding: 0 5px; text-align: center; display: inline-block; color: rgba(0, 0, 0, .3); font-size: 15px">
              {{ ((100 * (page - 1)) + index + 1) < 10 ? '0' + ((100 * (page - 1)) + index + 1) : ((100 * (page - 1)) + index + 1) }}
          </span>
          <img :src="heart" style="width: 16px; height: 14px; vertical-align: middle"
               v-if="!userLikeList.includes(item.id)">
          <img :src="heartFill" style="width: 16px; height: 14px; vertical-align: middle"
               v-else>
          <img :src="download"
               style="padding-left: 5px;width: 15px; height: 15px; opacity: .8;">
        </td>
        <!-- 歌名 -->
        <td class="text-overflow">
            <span style="white-space: nowrap;">
              <span class="text-overflow" style="padding-right: 5px;" v-html="highLight(item.name)"></span>
            <span style="white-space: nowrap">
              <img :src="musicVip" alt="" style="vertical-align: middle; padding-right: 5px;"
                   v-if="item.fee === 1">
              <img :src="musicTry" alt="" style="vertical-align: middle; padding-right: 5px;" v-if="item.rt">
              <img :src="musicSq" alt="" style="vertical-align: middle; padding-right: 5px;" v-if="item.sq">
              <img :src="musicOnly" alt="" style="vertical-align: middle; padding-right: 5px;">
              <img :src="musicMv" alt="" style="vertical-align: middle; padding-right: 5px;" v-if="item.mv">
            </span>
           </span>
        </td>
        <!-- 歌手 -->
        <td class="text-overflow"> <span class="singer">{{item.ar.map(v => v.name).join('-')}}</span></td>
        <!-- 专辑 -->
        <td class="text-overflow">
          <span class="album" v-html="highLight(item.al.name)"></span>
        </td>
        <td>
          {{secondToMinute(item.dt / 1000)}}
        </td>
        <td>
          <div class="bar-box">
            <div :style="{ width: item.pop / 100 * 80 + 'px' }" class="bar"></div>
          </div>
        </td>
      </tr>
    </table>
  </div>
</template>

<script lang="ts">
  import { createNamespacedHelpers } from 'vuex'
  import { SEARCH_MUSIC_LIST } from '@/utils/constant'
  import { songApi } from '@/api/song/song'
  import musicVip from '@/assets/img/vip-music.png'
  import musicTry from '@/assets/img/try-music.png'
  import musicSq from '@/assets/img/music-sq.png'
  import musicOnly from '@/assets/img/music-only.png'
  import musicMv from '@/assets/img/music-mv.png'
  import download from '@/assets/img/download.png'
  import heartFill from '@/assets/img/svg/heart-fill.svg'
  import heart from '../../assets/img/heart-white.png'


  const { mapActions } = createNamespacedHelpers('player')

  export default {
    name: 'MusicList',
    data() {
      return {
        userLikeList: [],
        heart,
        heartFill,
        download,
        musicVip,
        musicTry,
        musicSq,
        musicOnly,
        musicMv
      }
    },
    created() {
    },
    mounted() {
    },
    methods: {
      ...mapActions({ 'playTheMusic': 'playMusic' }),
      async playMusic(row, column, event) {
        console.log('playMusic')
        console.log(row)
        switch (row.fee) {
          case 0:
            const { success } = await songApi().checkMusicCanPlay({
              id: row.id
            })
            if (!success) {
              this.$warning('该音乐无版权，暂时无法播放')
              return
            }
            break
          case 1:
            this.$warning('该音乐为VIP歌曲，请先开通VIP')
            return
          case 4:
            this.$warning('该音乐为付费专辑，请先购买')
            return
          // case 8:
        }
        /**
         *
         * 0: 免费或无版权
         *   1: VIP 歌曲
         *   4: 购买专辑
         *   8: 非会员可免费播放低音质，会员可播放高音质及下载
         *
         */
        this.playTheMusic([row, true])
      }
    },
    computed: {
      highLight(txt) {
        return function(txt) {
          return txt.replace(this.keyword, `<span style="color: rgba(0, 64, 128, .75)">${this.keyword}</span>`)
        }
      }
    },
    props: {
      data: {
        type: Array,
        default: () => []
      },
      fields: {
        type: Array,
        // 操作栏，标题，歌手，专辑，时长，热度
        default: () => SEARCH_MUSIC_LIST
      },
      page: {
        type: Number,
        default: 1
      },
      keyword: {
        type: String,
        default: ''
      }
    },
    components: {}
  }
</script>

<style scoped>
  :deep(.el-table__body tr.current-row > td) {
    background-color: rgba(0, 0, 0, 0.1) !important;
  }

  .progress {
    width: 80px;
    height: 6px;
    background-color: rgba(48, 49, 51, .1);
    border-radius: 5px;
    overflow: hidden;
  }
  .bar-box {
    box-sizing: border-box;
    padding: 0 2px;
    background-color: rgba(48, 49, 51, .1);
    border-radius: 5px;
  }

  .bar {
    height: 6px;
    background-color: rgba(48, 49, 51, .2);
    border-radius: 5px;
  }

  table {
    table-layout: fixed;
  }

  th {
    text-align: start;
    font-size: 15px;
    font-weight: 400;
    color: rgba(0, 0, 0, .5);
  }

  td {
    color: rgba(0, 0, 0, .6);
    font-size: 14px;
  }

  .singer:hover, .album:hover {
    color: rgba(0, 0, 0, .8);
    cursor: pointer;
  }

  .cell-row {
    height: 35px;
  }

  .cell-row:nth-child(odd) {
    background-color: rgba(0, 0, 0, 0.03);
  }

  /* 顺序影响样式 */
  .cell-row:hover {
    background-color: rgba(0, 0, 0, 0.05);
  }

  .cell-row:focus {
    background-color: rgba(0, 0, 0, 0.05);
  }
</style>
